<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>CSS blending and compositing sample</title>
    <style>
      /* creates a div with two offset striped background images and a background color. */
      div {
        width: 200px;
        height: 200px;
        background-image: repeating-linear-gradient(
            45deg,
            red 0 15px,
            pink 15px 30px
          ),
          repeating-linear-gradient(-45deg, blue 0 15px, lightblue 15px 30px);
        background-size: 150px 150px;
        background-repeat: no-repeat;
        background-position:
          top left,
          bottom right;
        background-color: palegoldenrod;
        text-align: center;
        padding-top: 150px;
        font-family: sans-serif;
        box-sizing: border-box;
        border: 5px solid black;
      }
      div:nth-of-type(3n + 1) {
        background-blend-mode: normal;
      }
      div:nth-of-type(3n + 2) {
        background-blend-mode: multiply;
      }
      div:nth-of-type(3n + 3) {
        background-blend-mode: overlay;
      }
      div:nth-of-type(n + 4) {
        mix-blend-mode: difference;
      }
      /* put a pink background with transparent round holes that covers the entire element, and lay the examples in two rows with three columns each */
      section {
        padding: 0.75em;
        background: radial-gradient(
          circle,
          transparent 0 20px,
          rgb(255 200 200) 20px
        );
        background-size: 60px 60px;
        background-position: center;
        display: inline-grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1em;
      }
      /* make some of the text more legible */
      span {
        background-color: #ffffff99;
      }
    </style>
  </head>
  <body>
    <section>
      <div><span>Normal, with no blending</span></div>
      <div><span>Multiplies colors</span></div>
      <div><span>Multiplies based on background color</span></div>
      <div>Normal, with no blending</div>
      <div>Multiplies colors</div>
      <div>Multiplies based on background color</div>
    </section>
  </body>
</html>
